<!DOCTYPE html>
<html>
    啊啊啊啊啊啊啊啊啊啊
	<head>
		<meta charset="UTF-8">
		<title>选字游戏</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			body>div {
				width: 400px;
				height: 600px;
				background-color: lightgray;
				border: 2px solid black;3.6
				margin: 0 auto;
			}
			
			#div1>h1 {
				display: inline-block;
			}
			
			#div1>h1:nth-child(n+3) {
				float: right;
			}
			#div2 {
				width: 100%;
				height: 400px;
				font-size: 200px;
				line-height: 450px;
				text-align: center;
			}
			
			#div3>p {
				width: 75px;
				display: inline-block;
				font-size: 50px;
				text-align: center;
			}
			h3{
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: red;
			}
		</style>
	</head>

	<body>
		<div>
			<div id="div1">
				<!--时间-->
				<h1>剩余时间:</h1>
				<h1 id="time1">20</h1>
				<!--答对个数-->
				<h1 id="scores">0</h1>
				<h1>数量:</h1>
			</div>
			<!--大字-->
			<div id="div2"></div>
			<!--规则-->
			<h3>点击选择上面大字的颜色</h3>
			<!--小字-->
			<div id="div3">
				<p>绿</p>
				<p>黄</p>
				<p>紫</p>
				<p>红</p>
				<p>蓝</p>
			</div>

			<script type="text/javascript">
				alert("黄斌最帅")
				var time1=document.getElementById("time1");
				var scores=document.getElementById("scores");
				var div2=document.getElementById("div2");
				var pWord=document.querySelectorAll("p");
				//颜色数组
				var wordColor=["red","yellow","blue","green","purple"];
				//文字数组
				var word1=["红","黄","蓝","绿","紫"];
				//随机数
				function randomNumber(x,y){
					return Math.floor(Math.random()*(y-x+1)+x);
				}
				//声明一个变量储存答案
				var answer;
				
				//大字 随机文字和颜色
				function randomQuestion(){
					div2.innerHTML=word1[randomNumber(0,4)];
					div2.style.color=wordColor[randomNumber(0,4)];
					switch (div2.style.color){
						case "red":answer="红"
							break;
						case "yellow":answer="黄"
							break;
						case "blue":answer="蓝"
							break;
						case "green":answer="绿"
							break;
						case "purple":answer="紫"
							break;
						default:
							break;
					}
				}
				randomQuestion();//显示大字
				
				//打乱顺序
				function randomArr(array){
					for(var i= 0;i<10;i++){
						var r1=randomNumber(0,4);
						var r2=randomNumber(0,4);
						if(r1!=r2){
							var temp=array[r1];
							array[r1]=array[r2];
							array[r2]=temp;
						}
					}
				}
				
				//随机小字
				function randomAnswer(){
					randomArr(word1);
					randomArr(wordColor);
					for(var i2=0;i2<pWord.length;i2++){
					pWord[i2].innerHTML=word1[i2];
					pWord[i2].style.color=wordColor[i2];
					}
				}
				randomAnswer();//显示小字
				
				//判断 加分 刷新
				for(i=0;i<pWord.length;i++){
					pWord[i].onclick =function (){
						if(this.innerHTML==answer){
							scores.innerHTML++;
							randomQuestion();
							randomAnswer();
						}
					}
				}
				//剩余时间
				var i1stop=setInterval(function() {
					time1.innerHTML-=1;
					if(time1.innerHTML ==-1) {
						clearInterval(i1stop);
						time1.innerHTML=0;
						alert("游戏结束!!!共"+scores.innerHTML+"分!");
						location.reload();
					}
				}, 1000);
			</script>
		</div>
		<div id="666">
			下次触发的犯罪分子行政主管是大法官电饭锅是大法官撒地方供电所覆盖阿额而发
		</div>
		<a href=""></a>
	</body>

</html>